<template>
	<el-dialog title="合同详情" size="medium" :visible.sync="params.showInfo" width="90%" :before-close="handleClose">
		<div v-if="params.showInfo">
			<el-container>
				<el-header class="addsales-header">基础信息</el-header>
				<el-main class="addsales-main">
					<el-form :inline="true" size="medium" class="search-form" label-width="180px" style="padding-bottom: 10px;">
						<div>
							<el-form-item label="签订市场：">
								<div class="el-form-items">{{params.paramsData.market.marketName || "暂无"}}</div>
							</el-form-item>
							<el-form-item label="签订商户：">
								<div class="el-form-items">{{params.paramsData.shop.shopName || "暂无"}}</div>
							</el-form-item>
							<el-form-item label="合同状态：">
								<div class="el-form-items">
					                <span>{{params.paramsData.contractState | filteContractState}}</span>
				                </div>
							</el-form-item>
                            <el-form-item label="合同起始日期：">
								<div class="el-form-items">{{params.paramsData.contractStartDate | filterDateForDay}}</div>
							</el-form-item>
                            <el-form-item label="合同截止日期：">
								<div class="el-form-items">{{params.paramsData.contractEndingDate | filterDateForDay}}</div>
							</el-form-item>
						</div>
					</el-form>
				</el-main>
				<el-header class="addsales-header">区域合同明细</el-header>
				<el-table  :data="contractRegionList" border >
                <el-table-column prop="region.regionName" label="区域名称" ></el-table-column>
                    <el-table-column prop="contractRegionRentFee" label="租金(元)" ></el-table-column>
                    <el-table-column label="租赁面积/车位">
                        <template   slot-scope="scope">
                            <span>
                                {{scope.row.contractRegionRentCount}}
                                {{scope.row.region.regionType | filteRegionUnit}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="租赁总金额">
                        <template   slot-scope="scope">
                            <span>{{scope.row.contractRegionAmount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态：">
                        <template   slot-scope="scope">
                            <span>{{scope.row.contractRegionState | filteContractState}}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作" align="center" width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.row.contractId)"  size="small"  type="primary">编辑</el-button>
                            <el-button @click="showContractInfo(scope.row)"  size="small"  type="primary">中止</el-button>
                        </template>
                    </el-table-column> -->
		        </el-table>
			</el-container>
		</div>
	</el-dialog>
</template>

<script>
	export default {
       data() {
        return {
            contractRegionList:[]
        }
        },
		methods: {
			handleClose() {
				this.params.showInfo = false
			}
        },
        watch:{
            "params.showInfo"(){
                if (this.params.showInfo){
                    this.$axios.get(this.$api.getContractRegionList,{params: {contractId: this.params.paramsData.contractId}})
                    .then((res)=>{
                        this.contractRegionList = res.data.result;
                    })
                }
            }
        },
		props: [
			'params'
		]
	}
</script>
<style scoped="scoped">
	.addsale-container {
		width: 1200px;
	}

	.addsales-header {
		background: #B3C0D1;
		line-height: 60px;
	}

	.addsales-main {
		padding: 0;
	}

	.none {
		display: none;
	}
	.el-form-item {
		margin-bottom: 10px;
	}
	.el-form-items{ width: 130px;}
	.el-form-itemt{ width: 400px;}
</style>
